﻿@model IEnumerable<TestEnvirementCL.POCO.Advertisement>

@{
    ViewBag.Title = "Index";
}

<script type="text/javascript" src="http://www.google.com/jsapi"></script>

 <script type="text/javascript">
     google.load('visualization', '1.1', { packages: ['controls'] });
    </script>
<script type="text/javascript">
    
    function drawVisualization() {
        // Create and populate the data table.
        var data = new google.visualization.DataTable();
        data.addColumn('string','Sports');
        data.addColumn('number','Advertisements');
            
        data.addRows(@Html.Raw(Json.Encode(ViewBag.ListSport)));

         //Creates a Dashboard
          var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));
          var dashboard1 = new google.visualization.Dashboard(document.getElementById('dashboard1_div'));
         // Create a genre slider, passing some options
        var albumSlider = new google.visualization.ControlWrapper({
          'controlType': 'NumberRangeFilter',
          'containerId': 'filter_div',
          'options': {
            'filterColumnLabel': 'Advertisements'
            
          }
        });         
        // Creates a barchart with some options
        var barChart = new google.visualization.ChartWrapper({
          'chartType': 'BarChart',
          'containerId': 'barchart_div',
          'options': {
            
            'width': 300,
            'height': 300,
            'legend': 'right'
          }
        });
          // Creates a linechart with some options
        var lineChart = new google.visualization.ChartWrapper({
          'chartType': 'LineChart',
          'containerId': 'linechart_div',
          'options': {
            
            'width': 300,
            'height': 300,
            
            'legend': 'right'
          }
        });
        //Connects a dashboard with the charts
        dashboard.bind(albumSlider, barChart);
        dashboard1.bind(albumSlider, lineChart);
        
        //Draw the dashboard
        dashboard.draw(data);
        dashboard1.draw(data);
       
    
    }

    google.setOnLoadCallback(drawVisualization);
</script>

<h2>@ViewBag.Message</h2>
<ul>
    @foreach (var sport in ViewBag.ListSports)
    {
        <li>@sport.Name</li>
    }
</ul>
<p>
    Here will come the test graphs.
</p>

<div id="dashboard_div">
    <div id="filter_div"></div>
    <div id="barchart_div" style="width: 600px; height: 400px;">
    </div>
    
</div>
<div id="dashboard1_div">
    <div id="filter_div"></div>
    <div id="linechart_div" style="width: 600px; height: 400px;">
    </div>
    
</div>
